<template>
  <div>
    <div class="movie-top">
      <my-header-1></my-header-1>
      <my-header-2></my-header-2>
      <!-- 子路由路径 a标签 -->
      <nav class="movie-nav">
        <div class="movie-addr" @click="goCity">
          深圳<span class="iconfont icon-xiangxia1"></span>
        </div>
        <ul>
          <li><router-link to="/movie/reying">热映</router-link></li>
          <li><router-link to="/movie/yingyuan">影院</router-link></li>
          <li><router-link to="/movie/daiying">待映</router-link></li>
          <li><router-link to="/movie/jingdian">经典电影</router-link></li>
        </ul>
        <div class="movie-search"><i class="iconfont icon-sousuo"></i></div>
      </nav>
    </div>
    <!-- 子路由路由出口 -->
    <div class="movie-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//引入头部的组件
import MyHeader1 from "../../components/MyHeader1.vue";
import MyHeader2 from "../../components/MyHeader2.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Movie",
  //注册
  components: {
    MyHeader1,
    MyHeader2,
  },
  methods: {
    goCity() {
      this.$router.push("/citylist");
    },
  },
};
</script>

<style lang="less" scoped>
.movie-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 1;
}
.movie-main {
  margin-top: 4.2667rem;
}
.movie-nav {
  display: flex;
  justify-content: space-around;
  height: 1.3333rem;
  line-height: 1.3333rem;
  text-align: center;
  border-bottom: 1px solid #ccc;
  .movie-addr {
    width: 20%;
    font-size: 15px;
    span {
      font-size: 10px;
      color: #ccc;
    }
  }
  .movie-search {
    width: 20%;
    i {
      font-size: 25px;
      color: #f03d37;
    }
  }
  ul {
    width: 60%;
    display: flex;
    justify-content: space-around;
    li {
      a {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        font-size: 15px;
        color: #666;
        font-weight: bold;
        // 绝对的激活状态链接样式匹配
        &.router-link-exact-active {
          font-size: 17px;
          border-bottom: 3px solid #f03d37;
          color: #333;
        }
      }
    }
  }
}
</style>